<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            padding: 10px;
            margin-bottom: 2rem;
        }
        .string:after{
            content: 'world';
        }
        .title:after{
            content: attr(title);
        }
        .url:after{
            content: url(../../../demo.jpg);
        }

        ul{
            margin-bottom: 0 !important;
            counter-reset: test;
            counter-reset: test2;
            counter-reset: test3;
        }
        .counter li{
            counter-increment: test 1;
            display: block;
        }
        .counter li li{
            counter-increment: test2 1;
        }
        .counter li li li{
            counter-increment: test3 1;
        }
        .counter li:before{
            color: red;
            content: counter(test, decimal)'. ';
        }
        .counter li li:before{
            color: blue;
            content: counter(test, decimal)'.'counter(test2, decimal)'. ';
        }
        .counter li li li:before{
            color: green;
            content: counter(test, decimal)'.'counter(test2, decimal)'.'counter(test3, decimal)'. ';
        }

        .counter-reset >li{
            counter-increment: test5 1;
        }
        .counter-reset >li:before{
            content: counter(test5);
            counter-reset: test5 20;
            color: red;
            font-size: 24px;
        }
        .counter-tj{
            counter-reset: counttj;
        }
        .counter-tj input:checked{
            counter-increment: counttj;
        }
        .tj-result:after{
            content: counter(counttj);
        }
    </style>
</head>
<body>
    <h1>Content</h1>

    <h2>content: string</h2>
    <div class="box string">hello, </div>

    <h2>content: title</h2>
    <div class="box title" title="Hello Title"></div>

    <h2>content: url</h2>
    <div class="box url"></div>

    <h2>content: counter</h2>
    <ul class="box counter">
        <li>使用已命名的计数器
            <ul class="box counter">
                <li>使用已命名的计数器
                    <ul class="box counter">
                        <li>使用已命名的计数器</li>
                        <li>使用已命名的计数器</li>
                    </ul>
                </li>
                <li>使用已命名的计数器</li>
                <li>使用已命名的计数器</li>
            </ul>
        </li>
        <li>使用已命名的计数器
            <ul class="box counter">
                <li>使用已命名的计数器
                    <ul class="box counter">
                        <li>使用已命名的计数器</li>
                        <li>使用已命名的计数器</li>
                    </ul>
                </li>
                <li>使用已命名的计数器</li>
                <li>使用已命名的计数器</li>
            </ul>
        </li>
        <li>使用已命名的计数器
            <ul class="box counter">
                <li>使用已命名的计数器
                    <ul class="box counter">
                        <li>使用已命名的计数器</li>
                        <li>使用已命名的计数器</li>
                    </ul>
                </li>
                <li>使用已命名的计数器</li>
                <li>使用已命名的计数器</li>
            </ul>
        </li>
        <li>使用已命名的计数器
            <ul class="box counter">
                <li>使用已命名的计数器
                    <ul class="box counter">
                        <li>使用已命名的计数器</li>
                        <li>使用已命名的计数器</li>
                    </ul>
                </li>
                <li>使用已命名的计数器</li>
                <li>使用已命名的计数器</li>
            </ul>
        </li>
    </ul>


    <h1>content-reset</h1>
    <p>将指定selector的计数器复位</p>
    <ul class="box counter-reset">
        <li>使用已命名的计数器</li>
        <li>使用已命名的计数器</li>
        <li>使用已命名的计数器</li>
    </ul>

</body>
</html>